<template>
<div class="zujian">
  <lone class="lonel"></lone>
   <div class="bottom">
    
    <div v-for="(v, index) in arr" :key="index" class="xia">
      <div class="xias">
        <img :src="v.img" alt="" />
        <p class="jia">￥{{ v.newprice }}</p>
        <p class="xiahua">￥<s>{{ v.oldprice }}</s></p>
      </div>
    </div>
  </div>
</div>
 
</template>

<script>
import serviceAxios from "../../../../src/utils/service";
import lone from "../homepage/lone.vue";
export default {
  data() {
    
    return {
      time: 30 * 60 * 60 * 1000,
      arr: [],
    };
  },
  components: {
lone,
  },
  mounted() {
    serviceAxios({
      url: "http://localhost:3000/ClearanceSale",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        console.log(element);
        this.arr.push(element);
      });
    });
  },
};
</script>

<style scoped>
.zujian{
  width: 95%;
  border-radius: 5px;
}
.lonel{
  margin-top: 18px;
}
.bottom {
  width: 360px;
  height: 200px;
  display: flex;
  overflow: auto;
  flex-wrap: nowrap;
  margin: 1px 10px;
 
}
/* .bottom .top {
  height: 25px;
  width: 375px;
  background: white;
  display: flex;

  
} */

 .bottom .xia {
  width: 25%;
  display: flex;
  /* overflow: auto;
  flex-wrap: nowrap; */
 /* background-color: yellow; */
} 
.bottom .xia .xias{
  display: flex;
  flex-direction: column;
  width: 25%;
}
.bottom .xia p{
  text-align: center;
  margin-left: 12px;
}
.bottom .xia .xias .jia{
  margin-top: 17px;
}
.bottom .xia .xias .xiahua{
  color: gray;
  font-size: 8px;
  margin-top: 14px;
}
.bottom .top img {
  width: 20px;
  height: 20px;
}
.bottom div img {
  width: 90px;
  height: 90px;
}
.seckill .bottom div p {
  font-size: 10px;
  color: red;
}
</style>